<template>
    <div class="warning-container">
      <div class="warning-content">
        <div class="warning-icon">
          <i class="el-icon-warning"></i>
        </div>
        
        <h1 class="warning-title">访问受限</h1>
        
        <div class="warning-description">
          <p>尊敬的用户，我们检测到您正在使用开发者工具。</p>
          <p>为保护作者的知识产权与源码安全，使用开发者工具时页面访问将受到限制。</p>
          <p>ETNOR源码平台所有项目均受版权法保护，请通过合法渠道获取资源。</p>
        </div>
        
        <div class="warning-steps">
          <h3>请按照以下步骤操作：</h3>
          <ol>
            <li>关闭浏览器开发者工具（F12或右键菜单）</li>
            <li>关闭后系统将自动为您跳转回原页面</li>
            <li>若未自动跳转，请点击下方按钮</li>
          </ol>
        </div>
        
        <el-button type="primary" class="return-button" @click="returnToSourcePage">
          返回源码市场
          <i class="el-icon-right"></i>
        </el-button>
        
        <div class="copyright-notice">
          <p>© {{ currentYear }} ETNOR源码平台 - 保护原创 尊重版权</p>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import devtools from 'devtools-detect';
  
  export default {
    name: 'WarningPage',
    data() {
      return {
        currentYear: new Date().getFullYear(),
        checkInterval: null,
        sourcePage: '/'
      }
    },
    created() {
      // 获取来源页面
      const savedUrl = sessionStorage.getItem('source_page_url');
      if (savedUrl) {
        this.sourcePage = savedUrl;
      }
      
      // 开始监测开发者工具状态
      this.checkInterval = setInterval(this.checkDevTools, 1000);
    },
    methods: {
      // 检查开发者工具状态
      checkDevTools() {
        // 如果开发者工具已关闭，自动返回源页面
        if (!devtools.isOpen) {
          this.returnToSourcePage();
        }
      },
      
      // 返回来源页面
      returnToSourcePage() {
        // 确保开发者工具已关闭
        if (!devtools.isOpen) {
          window.location.href = this.sourcePage;
        } else {
          this.$message.error('请先关闭开发者工具后再返回');
        }
      }
    },
    beforeDestroy() {
      // 清除定时器
      if (this.checkInterval) {
        clearInterval(this.checkInterval);
      }
    }
  }
  </script>
  
  <style scoped>
  .warning-container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 20px;
  }
  
  .warning-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 40px;
    max-width: 600px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  
  .warning-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #ff416c, #ff4b2b);
  }
  
  .warning-icon {
    font-size: 80px;
    color: #ff4b2b;
    margin-bottom: 20px;
  }
  
  .warning-title {
    color: #333;
    font-size: 32px;
    margin-bottom: 20px;
  }
  
  .warning-description {
    color: #666;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
  }
  
  .warning-description p {
    margin-bottom: 10px;
  }
  
  .warning-steps {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 30px;
    text-align: left;
  }
  
  .warning-steps h3 {
    color: #333;
    margin-bottom: 15px;
    font-size: 18px;
  }
  
  .warning-steps ol {
    padding-left: 20px;
  }
  
  .warning-steps li {
    margin-bottom: 10px;
    color: #555;
    line-height: 1.5;
  }
  
  .return-button {
    padding: 12px 30px;
    font-size: 16px;
    border-radius: 50px;
    background: linear-gradient(90deg, #ff416c, #ff4b2b);
    border: none;
    box-shadow: 0 4px 15px rgba(255, 75, 43, 0.2);
    margin-bottom: 25px;
    transition: all 0.3s ease;
  }
  
  .return-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 75, 43, 0.3);
  }
  
  .return-button:active {
    transform: translateY(0);
  }
  
  .copyright-notice {
    margin-top: 20px;
    font-size: 14px;
    color: #999;
  }
  
  @media (max-width: 768px) {
    .warning-content {
      padding: 30px 20px;
    }
    
    .warning-icon {
      font-size: 60px;
    }
    
    .warning-title {
      font-size: 24px;
    }
  }
  </style>